<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/foreHeader::html('报名托管')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->

<!--文本校验-->
<link href="bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrapValidator/bootstrapValidator.min.js"></script>

<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/fore/foreNavigator::html"></div>

    <!--左侧折叠菜单-->
    <div th:include="include/fore/foreLeftMenu::html"></div>

    <div class="col-md-10">
        <form class="form-horizontal col-md-6">
            <div class="form-group">
                <label class="col-md-4 control-label">学员名称：</label>
                <div class="col-md-6">
                    <input name="name" class="form-control" v-model="bean.student.name"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">学员性别：</label>
                <div class="col-md-6">
                    <label class="radio-inline">
                        <input type="radio" name="sex" v-model="bean.student.sex" id="inlineRadio1"
                               value="男"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" v-model="bean.student.sex" id="inlineRadio2"
                               value="女"> 女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">学员年龄：</label>
                <div class="col-md-6">
                    <input name="age" class="form-control" v-model="bean.student.age"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">学员照片：</label>
                <div class="col-md-6">
                    <input id="image" type="file" @change="getImage($event)">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">学校地址：</label>
                <div class="col-md-6">
                    <input name="school"  class="form-control" v-model="bean.student.school"/>
                </div>
            </div>
            <div class="form-group">
                <button id="submitbtn" type="submit" class="form-control btn-info " @click="addStudent">提交学员信息</button>
            </div>

        </form>
        <form class="form-horizontal col-md-6">
            <div class="form-group">
                <label class="col-md-4 control-label">选择托管对象：</label>
                <div class="col-md-6">
                    <select class="form-control" v-model="bean.student">
                        <option v-for="student in students" :value="student">{{student.name}}|{{student.state}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">选择兴趣班：</label>
                <div class="col-md-6">
                    <select class="form-control" v-model="bean.type">
                        <option v-for="type in types" :value="type">{{type.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <button class="form-control btn-info " @click="add">报名</button>
            </div>
        </form>
    </div>

    <div th:replace="include/fore/foreFoot::html"></div>
</div>
</body>

<script>
    $(function () {


        var data4Vue = {
            uri: "register",
            bean: {
                id: 0,
                student: {id: 0, name: "", age: "", sex: "", image: "", school: "", isRegister: false, state: "已报名"},
                user: {id: 0},
                type: {id: 0},
                ispay: false
            },
            types: [],
            students: [],
            img: ""
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {
                this.getUser();
                this.getType();
                this.getStudent();
            },
            methods: {
                getUser: function () {
                    this.bean.user.id = [[${session.user.id}]];
                    var url = "user/" + this.bean.user.id;
                    axios.get(url).then(function (response) {
                        vue.bean.user = response.data.data;
                    })
                },
                getType: function () {
                    var url = "subclass";
                    axios.get(url).then(function (response) {
                        vue.types = response.data.data;
                    })
                },
                getImage: function (event) {
                    this.img = event.target.files[0];
//                    this.bean.img = event.target.files[0];
                },
                getStudent: function () {
                    var url = "user/" + this.bean.user.id + "/student?isRegister=" + this.bean.student.isRegister;
                    axios.get(url).then(function (response) {
                        vue.students = response.data.data;
                        console.log(vue.students);
                    })
                },
                add: function () {
                    var formData = new FormData();
                    formData.append("student", this.bean.student.id);
                    formData.append("user", this.bean.user.id);
                    formData.append("type", this.bean.type.id);
                    formData.append("ispay", this.bean.ispay);
                    axios.post(this.uri, formData).then(function (res) {
                        if (res.data.code == 0)
                            alert("报名成功");
                        else
                            alert(res.data.message);
                    })
                },
                addStudent: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    var url = "student";
                    var formData = new FormData();
                    formData.append("name", this.bean.student.name);
                    formData.append("age", this.bean.student.age);
                    formData.append("sex", this.bean.student.sex);
                    formData.append("school", this.bean.student.school);
                    formData.append("user", this.bean.user.id);
                    formData.append("img", this.img);
                    formData.append("isRegister", this.bean.isRegister);
                    formData.append("state", this.bean.student.state);

                    console.log(formData);
                    axios.post(url, formData).then(function (res) {
                        console.log(res);
                    })
                },
            }
        })
    })
</script>

<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
//                名称
                name: {
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        regexp: {
                            /*中文 2-7位*/
                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
                            message: '请输入正确的姓名'
                        }
                    },


                },
                //                性别
                sex: {
                    validators: {
                        notEmpty: {
                            message: '性别不能为空'
                        }
                    }
                },
//                年龄
                age: {
                    validators: {
                        notEmpty: {
                            message: '年龄不能为空'
                        },
                        regexp: {
                            /*年龄1-120*/
                            regexp: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
                            message: "年龄1-120"
                        }

                    }
                },
                //                地址
                school: {
                    validators: {
                        notEmpty: {
                            message: "地址不能为空"
                        }
                    }
                }
            }
        });
//        $('#submitbtn').click(function () {
//            $('form').bootstrapValidator('validate');
//        })
    });

</script>
</html>

